<template>
	<view class="rerund">
		<n-loading></n-loading>
		<scroll-view scroll-y="true" class="orderList">
			<view class="nodata" v-if="orderList.length==0">
				<image src="../../static/svgIcon/noOrder.svg" mode=""></image>
				<view class="tips">暂无售后订单~</view>
			</view>
			<view class="orderItem boxStyle" v-for="(item,index) of orderList" :key='index'>
				<!-- 退款 -->
				<view class="" v-if="item.type == 1">
					<view class="orderTiem">
						<view>{{getdate(item.created_at,1)}}</view>
						<view class="orderState" v-if="item.apply_cancel==1">{{item.status==1?'申请审核中':(item.status==2?'申请通过':'申请拒绝')}}</view>
						<view class="orderState" v-if="item.apply_cancel==2">已撤销申请</view>
						<view class="orderState" v-if="item.apply_cancel==3">撤销通过</view>
						<view class="orderState" v-if="item.apply_cancel==4">拒绝撤销</view>
					</view>
				</view>
				<!-- 退货 -->
				<view class="" v-if="item.type == 2">
					<view class="orderTiem">
						<view>{{getdate(item.created_at,1)}}</view>
						<view class="orderState" v-if="item.apply_cancel==1 && item.status!=2">{{item.status==1?'申请审核中':(item.status==3?'申请拒绝':(item.status==4?'退货超时':'售后成功'))}}</view>
						<view class="orderState" v-if="item.apply_cancel==1 && item.status==2">{{item.billReship==null?'申请通过':(item.billReship.status==2?'已发退货':'已收退货')}}</view>
						<view class="orderState" v-if="item.apply_cancel==2">已撤销申请</view>
						<view class="orderState" v-if="item.apply_cancel==3">撤销通过</view>
						<view class="orderState" v-if="item.apply_cancel==4">拒绝撤销</view>
					</view>
				</view>
				<!--  @tap="orderInfoGo(item.type,item.aftersales_id)" -->
				<view class="orderInfo" v-for="(goods,i) of item.orderItems" :key='goods.id'>
					<dh-image class="niccImg" :src="goods.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="orderRight">
						<view class="title ellipsis">{{goods.name}}</view>
						<view class="parameter"><label>{{goods.specs}}</label></view>
						<view class="orderPrice">
							<view class="showPrice">
								￥<text>{{goods.price}}</text>
							</view>
							<view>数量 x {{goods.num}}</view>
						</view>
					</view>
				</view>
				<view class="count">
					<!-- <view class="discount">{{item.order_pmt==null?'':'优惠'+item.order_pmt}}</view> -->
					<view>退款￥<text>{{item.refund}}</text></view>
				</view>
				<view class="orderOperate">
					<view class="payTiem">
						<view class="" v-if="item.type ==2 && item.status==2 && item.apply_cancel==1 && item.billReship==null">
							退货请在 <u-count-down :timestamp="termOfValidity-dateDiff(item.audit_at)" separator="zh" bg-color="transparent" color="#FF5238" separator-color="#FF5238" separator-size="24" font-size="24"></u-count-down>内处理
						</view>
					</view>
					<view class="orderBut">
						<button class="payBut" @tap="orderInfoGo(item.type,item.aftersales_id)">查看详情</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单列表
				orderList:[],
				isLoadMore:false,
				page: 1,
				pageSize: 10,
				termOfValidity:null,
			}
		},
		onLoad: function (option) { 
			this.getOrderList()
		},
		// 滑动到底部
		onReachBottom() {
			if(!this.isLoadMore){
				this.getOrderList()
			}
		},
		methods: {
			// 获取订单列表
			getOrderList(){
				this.apiget('/fun/bill-aftersales/index',{page:this.page,pageSize:this.pageSize}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderList = this.orderList.concat(res.data.data.list);
						this.termOfValidity = res.data.data.termOfValidity;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			orderInfoGo(type,id) {
				if(type == 1){
					uni.navigateTo({//退款parseInt
						url:'./refundResult?id='+id
					})
				}else{
					uni.navigateTo({//退货
						url:'./goodsResult?id='+id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.rerund {
		font-size: 24rpx;
		// #ifndef MP-WEIXIN
		// #endif
		// margin: 0 32rpx;
		width: inherit;
		background: #f5f5f5;
		min-height: 100%;
		padding-top: 16rpx;
		.orderItem {
			padding: 20rpx 32rpx;
			margin: 0 0 16rpx 2.5%;
			box-shadow: 0px 2px 8px rgba(255, 82, 56, 0.02);
			width: 95%;
			.orderOperate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;

				.payTiem {
					color: #666666;
				}

				.orderBut {
					display: flex;
					align-items: center;
				}

				button {
					margin: 0;
					font-size: 24rpx;
					border-radius: 30rpx;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
				}

				.payBut {
					color: #FF5238;
					border:1px solid #FF5238;
					margin-left: 20rpx;
				}

				.addrBut {
					background-color: inherit;
					border: 2rpx solid #666666;
					color: #666666;
					line-height: 58rpx;
				}
				
				.remindBut{
					margin-left: 20rpx;
					background-color: inherit;
					border: 2rpx solid #FF5238;
					color: #FF5238;
					line-height: 58rpx;
				}
				.othercolor{
					color: #666666;
					padding:0 16rpx;
				}

			}

			.count {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 16rpx;
				font-size: 24rpx;

				text {
					font-weight: 500;
					font-size: 28rpx;
				}

				.discount {
					color: #666666;
					margin-right: 20rpx;

				}
			}

			.orderInfo {
				margin-top: 36rpx;
				display: flex;
				align-items: center;



				.orderPrice {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.showPrice {
						font-weight: 28rpx;
					}
				}

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}
				
				.niccImg{
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}

				.orderRight {
					flex: auto;
					width: 1px;
					margin-left: 10rpx;

					.title {
						font-weight: 600;
						font-size: 28rpx;
					}

					.parameter {
						margin-top: 24rpx;
						font-size: 24rpx;
						color: #666666;

						label {
							padding: 4rpx 12rpx;
							background-color: #F8F8FA;
							border-radius: 4px;
						}

						.u-icon {
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.orderTiem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;

			.orderState {
				color: #FF5238;
			}
			
			.orderState2{
				color: #666;
			}
			.orderStateTxt{
				padding-right: 20rpx;
				box-shadow: 1px 0px 0px #EEEFF3;
			}
			.trashDelete{
				width: 32rpx;
				height: 32rpx;
				float: right;
				margin-left: 20rpx;
			}
		}
	}

	
</style>
